<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }
        .el-tabs__content{
            height: 450px;
        }
        .el-transfer-panel{
            width: 400px;
            height: 450px;
        }
        .el-transfer-panel__list{
            height: 400px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="20">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">
                    <el-button type="primary" size="large" icon="search" @click="query">检索</el-button>
                    <el-button type="primary" size="large">保存</el-button>
                    <el-button type="primary" size="large" @click="clear">清除</el-button>
                    <el-button type="primary" size="large" icon="delete">删除</el-button>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="4">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="2"><span style="font-size: 2em;">用户组维护</span></el-menu-item>
            </el-menu>
        </el-col>
    </el-row>

    <el-form :model="userGroup" ref="userGroup" label-width="100px">

        <div style="padding: 30px;">
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="用户组 :">
                            <el-input v-model="userGroup.userGroupId">
                                <el-button slot="append" icon="search" @click="dialogTableVisible = true"></el-button>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-dialog title="用户组" :visible.sync="dialogTableVisible" top="5%">
                <el-table :data="gridData" border style="width: 100%" height="600" highlight-current-row @row-dblclick="selectedRowUserGroup">
                    <el-table-column property="userGroupTab" label="用户组" width="230"></el-table-column>
                    <el-table-column property="userGroupDescTab" label="用户组描述" width="500"></el-table-column>
                </el-table>
            </el-dialog>
        </div>

        <template>
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="主要信息" name="first">
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col :span="12">
                            <el-form-item label="描述 :">
                                <el-input v-model="userGroup.desc"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="用户" name="second">
                    <template>
                        <el-transfer v-model="selectedGroup" :data="selectGroupList" :titles="['可用用户', '已分配用户']"></el-transfer>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="权限" name="third">
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="authData"
                                height="600"
                                border
                                tooltip-effect="dark"
                                style="width: 100%">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="activityDesc"
                                    label="作业组和作业"
                                    width="800">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="自定义字段" name="four">

                </el-tab-pane>
            </el-tabs>
        </template>
    </el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>

<script type="text/javascript" src="http://mockjs.com/dist/mockdata.js"></script>
<script>
    //  ------------ 测试产生虚拟数据 -------------------
    const _userGroupList = [];
    for( var i = 0; i < 20; i++){
        _userGroupList.push(
            Mock.mock({
                "userGroupTab":Mock.mock('@csentence(5)'),
                "userGroupDescTab":Mock.mock('@csentence(3, 5)')
            })
        );
    }

    const _authList = [];
    for( var i = 0; i < 20; i++){
        _authList.push(
            Mock.mock({
                "activityDesc":Mock.mock('@csentence(5)')
            })
        );
    }

    const _selectGroupList = [];
    for( var i = 0; i < 20; i++){
        _selectGroupList.push(
            Mock.mock({
                "key":Mock.mock('@csentence(5)'),
                "label":Mock.mock('@csentence(3, 5)')
            })
        );
    }

    const userGroupInfo =  Mock.mock({
        "userGroupId":Mock.mock('@last()'),
        "desc":Mock.mock('@ctitle(5)')
    })
    //  ------------ 赋值 ------------------------
    new Vue({
        el: '#app',
        data: function() {
            return {
                activeName: 'first',
                userGroup:{
                    userGroupId : "",
                    desc : ""
                },
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                gridData:_userGroupList,
                dialogTableVisible: false,
                selectGroupList : _selectGroupList,
                selectedGroup : "",
                authData : _authList
            }
        },
        methods: {
            filterMethod() {
                console.log('submit!');
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            query(){
                var me = this;
                for( var p in me.userGroup){
                    me.userGroup[p] = userGroupInfo[p]?userGroupInfo[p]:"";
                }
            },
            clear(){
                var me = this;
                for( var p in me.userGroup){
                    me.userGroup[p] = "";
                }
            },
            selectedRowUserGroup( row,event){
                var userGroupTab = row.userGroupTab;
                var userGroupDescTab = row.userGroupDescTab;
                this.dialogTableVisible=false;
                this.userGroup.userGroupId = userGroupTab;
                this.userGroup.desc = userGroupDescTab;
            }
        }
    })
</script>
</html>